<!--个人中心-->
<template lang="pug">
  kalix-master
    div.PersonalCenter
      div.bgc(:style="{width: maxWidth}")
        img(src="/static/PersonalCenter/u3696.jpg")
      div.personal
        div.personal-left
          div.HeadPortrait
            <!--img(src="static/PersonalCenter/u3741.png")-->
            img(:src="userIcon")
          div.xinxi
            router-link(v-bind:to="{name:'PersonalCenter'}")
              p.information 个人信息
            router-link(v-bind:to="{name:'InQuire'}")
              p 学分查询
            router-link(v-bind:to="{name:'Collection'}")
              p 我的收藏
            router-link(v-bind:to="{name:'History'}")
              p 历史记录
            router-link(v-bind:to="{name:'CourseManagement'}")
              p 课程管理
            div(v-if="isTeacher")
              router-link(v-bind:to="{name:'LiveManagement'}")
                p 直播管理
        div.personal-right
          div.title
            span {{username}}
          div.center
            div.centerBox
              ul
                li
                  span.centerP 账号 :
                  el-input(v-model="formModel.loginName" placeholder="请输入昵称").inputName
                li
                  span.centerP 密码 :
                  el-input(placeholder="请输入密码" v-model="password" show-password )
                <!--li-->
                <!--span.centerP 确认密码 :-->
                <!--el-input(placeholder="请再次输入密码" v-model="formModel.password" show-password )-->
                li
                  span.centerP 邮箱 :
                  el-input(v-model="formModel.email" text="email" placeholder="请输入邮箱" @blur="sendEmail($event)")
                li
                  span.centerP 学号/工号 :
                  el-input(v-model="formModel.code" placeholder="请输入学号或者工号" @blur="BlurText($event)")
                li
                  span.centerP 姓名 :
                  el-input(v-model="formModel.name" placeholder="请输入姓名")
                li
                  span.centerP 院系 :
                  form.form
                    el-cascader.centers(v-model="didCascader" placeholder="请选择院系信息" :options="options" filterable @change="getDep" :clearable="true" v-bind:show-all-levels="false" change-on-select)
                li.profile
                  span.centerP.profileTop 个人简介 :
                  textarea.textInput(v-model="formModel.intro" rows="8" cols="32" wrap="hard" style="resize:none" maxlength="300")
              span.baocun(@click="submit") 保存
</template>

<script type="text/ecmascript-6">
  import FormModel from './model'
  import Message from '../../common/message'
  export default {
    data() {
      return {
        value1: null,
        color1: '#409EFF',
        value2: true,
        uid: '',
        username: '',
        userIcon: '',
        formModel: Object.assign({}, FormModel),
        zhuanye: [],
        options: [],
        didCascader: [],
        did: null,
        email: this.email,
        password: null,
        isTeacher: false
      }
    },
    mounted() {
      this.uid = this.$KalixCatch.get('id')
      this.username = this.$KalixCatch.get('user_name')
      this.getHeadImg(this.uid)
      this.getDepCascader() // 获取院系信息并以级联形式显示
      this.formModel.id = this.uid
      this.getData()
      this.getRid()
    },
    methods: {
      getRid() {
        this.axios.get('/camel/rest/roles', {
          params: {
            jsonStr: {'name': '教师'}
          }
        }).then(res => {
          if (res.data.totalCount > 0) {
            this.getRole(res.data.data[0].id)
          }
        })
      },
      getRole(rid) {
        this.axios.get('/camel/rest/roles/' + rid + '/users/ids', {
          params: {
            id: rid
          }
        }).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i] === parseInt(this.uid)) {
              this.isTeacher = true
            }
          }
        })
      },
      getEchoByDid(did) {
        console.log('did--------', did)
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/departments/getEchoByDid', // 通过uri获取级联回显的数据
          params: {
            did: did
          }
        }).then(res => {
          this.didCascader = res.data.tag.split(',')
        })
      },
      getDepCascader() { // 获取院系信息并以级联形式显示
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/departments/getDepCascader'
        }).then(res => {
          this.options = res.data.data
        })
      },
      getDep(val) { // 通过级联获取数据后转成字符串
        this.formModel.departmentsId = val.toString().substring(val.toString().lastIndexOf(',') + 1, val.toString().length)
      },
      sendEmail() {
        // 邮箱正则
        var regEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
        if (this.formModel.email === '') {
          Message.warning(`请输入邮箱`)
        } else if (!regEmail.test(this.formModel.email)) {
          Message.warning(`请输入正确邮箱`)
        }
      },
      BlurText(e) {
        let boolean = new RegExp('\\d*[1-9]\\d*').test(e.target.value)
        if (!boolean) {
          Message.info('请输入数字')
          e.target.value = ''
        }
      },
      maxWidth() {
        if (this.width < 1200) {
          this.width = 1200 + 'px'
        } else {
          this.width = 100 + '%'
        }
      },
      getHeadImg(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + `${id}`
        }).then(res => {
          this.userIcon = res.data.data[0].icon
        })
      },
      getData() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + this.formModel.id,
          params: {
            id: this.formModel.id
          }
        }).then(res => {
          this.formModel = res.data.data[0]
          this.getEchoByDid(this.formModel.departmentsId)
        })
      },
      submit() {
        if (this.password == null || this.formModel.loginName == null) {
          alert('用户名或密码不能为空!')
        } else {
          this.formModel.password = this.password
          this.axios.request({
            method: 'PUT',
            url: '/camel/rest/users/' + this.formModel.id,
            data: this.formModel
          }).then(res => {
            this.$KalixCatch.save('user_name', this.formModel.username)
            this.$KalixCatch.save('loginname', this.formModel.loginName)
            if (res.data.msg === '修改成功！') {
              Message.success('保存成功')
            } else {
              Message.error('保存失败')
            }
          })
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .bgc
    width 100%
    height 327px
    position absolute
    top 100px
    z-index -1

  .bgc img
    width 100%
    height 100%

  .personal
    width 1200px
    height 928px
    /*background-color: green*/
    background-color: #fff
    margin 0 auto
    margin-top 186px
    position relative
    border-radius 5px
    box-shadow 4px 4px 6px #ccc

  .personal-left
    width 18%
    height 100%
    float left
    position: relative

  .personal-right
    width 80%
    height 100%
    float right

  /*头像*/
  .HeadPortrait
    width 150px
    height 150px
    position: absolute
    right 0
    top -75px

  .HeadPortrait img
    width 100%
    height 100%

  .xinxi
    position absolute
    top 110px
    right 0
    width 150px
    /*height 300px*/
    border 1px solid #ccc
    border-radius 5px
    overflow hidden

  .xinxi p
    display block
    width 150px
    height 50px
    text-align center
    line-height 50px
    color #999
    box-sizing border-box
    border-top 1px solid #ccc

  .xinxi:first-child p
    border-top none!important

  .xinxi .information
    background-color: #008F95
    color #fff
    font-weight 700
    border-top none

  /*右侧*/
  .title
    margin-top 36px

  .title span
    font-size 20px
    margin-right 14px
    color #000
    font-weight 700

  .center
    width 905px
    height 776px
    border 1px solid #ccc
    border-radius 5px
    margin-top 54px
    position relative

  .centerBox
    width 400px
    height 90%
    margin 0 auto

  .centerBox li
    margin 26px 0
    width 500px
    height 32px
    line-height 32px
    position relative

  .centers
    width 248px
    height 26px

  .centerP
    display inline-block
    width 90px
    margin-right 20px
    text-align right
    color #525252

  .Color
    color #525252

  .baocun
    display block
    width 80px
    height 34px
    text-align center
    line-height 34px
    color #fff
    background-color #008F95
    border-radius 5px
    cursor pointer
    margin-left 136px
    font-weight 700

  /*::-webkit-scrollbar*/
  /*overflow-x hidden*/
  .form
    display inline-block

  .select
    width 150px
    height 30px
    margin-right 18px
    color #999

  .centerBox .profile
    width 500px
    height 122px

  .profile textarea
    width 240px
    height 120px
    margin-left 110px

  .profileTop
    position absolute
    left 0
    top -6px

  .textInput
    width 250px
    height 120px
    box-sizing border-box

  .el-input
    width 250px
    height 40px

</style>
